<!--
 * @Date: 2024-02-27 16:01:53
 * @Auth: 873768511@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-03-01 15:15:30
 * @FilePath: \ztc-dp\src\views\overview\components\centerMap.vue
-->
<template>
  <div class="content">
    <el-row class="content-top">
      <el-col :span="6" v-for="item in topList" class="top-card">
        <svg-icon class="icon" :icon-class="item.icon"></svg-icon>
        <div class="item-text">
          <div class="name">{{ item.name }}</div>
          <div>
            <span class="count">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { getTop } from "@/api/screen";
const topList = ref([
  { name: "车辆总数", value: 0, unit: "辆", key: "carNum", icon: "car" },
  { name: "工地总数", value: 0, unit: "个", key: "siteNum", icon: "gd" },
  { name: "消纳场所总数", value: 0, unit: "个", key: "xncsNum", icon: "cs" },
  { name: "事件总数", value: 0, unit: "件", key: "eventNum", icon: "event" },
]);
function getTopInfo() {
  getTop().then((res) => {
    const obj = res.data;
    topList.value.forEach((item) => {
      item.value = obj[item.key];
    });
  });
}
onMounted(() => {
  getTopInfo();
});
</script>

<style lanf="scss" scoped>
.content {
  height: calc(100% - 40px);
  width: 100%;
  position: relative;
}
.content-top {
  height: 60px;
}
.top-card {
  display: flex;
  align-items: center;
}
.icon {
  font-size: 64px;
}
.item-text {
  margin-left: 10px;
  .name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #84bfff;
  }
  .count {
    font-size: 36px;
    color: #e5f3ff;
  }
  .unit {
    margin-left: 10px;
    font-size: 18px;
    color: #52a2ff;
  }
}
</style>
